<template>
  <view>
	  
	  <uni-popup ref="popuplianxi" background-color="#fff"type="bottom" border-radius="10px 10px 0 0">
		  <view style="width: 400rpx;padding: 40rpx;" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			  <view style="display: flex;flex-direction: column; align-items: center;margin-left: 65%;">
				  <view style="padding: 10rpx;">188888888888</view>
				  <!-- 水平分割线 -->
				  <view style="width: 800rpx; padding: 10rpx;" class="separator"></view>
				  <view style="margin-top: 30rpx;">呼叫</view>
				  <view style="width: 800rpx; padding: 30rpx;" class="separator"></view>
				  <view style="margin-top: 30rpx;" @click="cancelPopup">取消</view>
			  </view>
		  </view>
	  </uni-popup>
	  
	   
			
    <!-- 功能选项 -->
    <view class="box" style="margin-bottom: 70rpx;">
      <view class="yuan">预约支付</view>..........
      <view class="yuan">支付订单</view>..........
      <view class="yuan">门店服务</view>
    </view>
    <!-- 厂信息 -->
    <view style="display: flex; margin: 30rpx;">
      <img style="padding-top: 2%;" src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/商家.png" />
      <view style="margin-left: 30rpx;">
        <view>{{repairFactoryName}}</view>
        <view>{{repairFactoryAddress}}</view>
      </view>
    </view>

    <!-- 用户信息 -->
    <view style="display: flex; margin: 30rpx;">
      <img src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/人员.png" />
      <view style="margin-left: 30rpx;">{{customerName}}</view>
      <view style="margin-left: 45%;">{{customerPhone}}</view>
    </view>

    <view style="display: flex; margin: 30rpx;" @click="open">
      <img src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/车辆-01.png" />
      <view style="margin-left: 30rpx;">立即预约</view>

      <!-- 跳转 -->
      <view style="margin-left: 65%;">
        <h2 style="font-size: 45rpx;">></h2>
      </view>
    </view>

    <!-- 车辆信息 -->
    <view style="display: flex; margin: 30rpx;">
      <img src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/车辆-01(1).png" />
      <view style="margin-left: 30rpx;">{{vehicleInfo}}</view>

      <!-- 跳转 -->
      <view style="margin-left: 37%;" @click="goToLeixPage">
        <h2 style="font-size: 45rpx;">></h2>
      </view>
    </view>
    <!-- 服务产品信息 -->
    <view>
      <view style="display: flex; margin: 30rpx;">
        <view style="margin-left: 25rpx;"><h4>服务产品</h4></view>
        <view style="margin-left: 35%;">共选择<span v-text="serviceProductCount"></span>项服务产品</view>
      </view>
      <view style="margin-left: 10%;">
        <view v-for="product in serviceProducts" :key="product.id" style="display: flex;">
          <view>{{product.name}}</view>
          <view style="margin-left: 40%;">{{product.price}}</view>
        </view>
      </view>
    </view>
    <!-- 优惠券 -->
    <view style="display: flex; margin: 30rpx;">
      <img src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/优惠券.png" />
      <view style="margin-left: 30rpx;">代金券/优惠券</view>
      <view style="margin-left: 40%;">{{couponInfo}}</view>

      <view style="margin-left: 6%;" @click="navigateToCouponPage">
        <h2 style="font-size: 45rpx;">></h2>
      </view>
    </view>
    <!-- 备注输入区域 -->
    <view style="display: flex; margin: 30rpx;justify-content: center;margin-top: 50rpx;">
      <textarea placeholder="备注信息" style="border: black solid 2rpx;padding: 20rpx; row"></textarea>
    </view>
    <!-- 按钮 -->
    <view style="display: flex;position: fixed;bottom: 0;">
      <view style="display: flex;flex-direction: column; width: 180rpx; margin-left: 30rpx;margin-bottom: 30rpx;">
        <view style="margin-left: 30rpx;">
          <image style="width: 50rpx; height: 50rpx;" src="../../../static/保养/车联网服务-04汽车保养-06确认订单_slices/客服.png" @click="lianxi"></image>
        </view>
        <view>联系客服</view>
      </view>
      <view style="padding-top: 2%; width: 300rpx; margin-left: 22%;">合计：¥30.50</view>
      <view style="width: 250rpx;">
        <button style="font-size: 28rpx;" @click="open02">提交订单</button>
      </view>
    </view>



    <!-- 弹出框时间选择器 -->
    <uni-popup ref="popup" background-color="#fff">
      <view style="width: 400rpx;padding: 40rpx;" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <h4 style="margin-bottom: 40rpx;">立即预约</h4>

        <!-- 时间框 -->
        <view style="display: flex;margin-left: 50rpx;">
          <!-- 日期选择器 -->
          <view class="uni-list-cell-db" style="margin-right: 70rpx;">
            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
              <view class="uni-input">{{date}}</view>
            </picker>
          </view>
          <!-- 时间选择器 -->
          <view class="uni-list-cell-db">
            <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
              <view class="uni-input">{{time}}</view>
            </picker>
          </view>
        </view>
        <!-- 按钮 -->
        <view style="display: flex; margin-top: 50rpx;">
          <button @click="cancelPopup02">取消</button>
          <button>确定</button>
        </view>
      </view>
    </uni-popup>
	
	
	
	<!-- 弹出输入支付密码框 -->
	<!-- 支付密码输入弹出框 -->
	<uni-popup ref="popupPayPassword" background-color="#fff">
	  <view style="width: 400rpx; padding: 40rpx;" class="popup-content">
	    <h4 style="margin-bottom: 20rpx;">请输入支付密码</h4>
		<h2>597.00</h2>
	    <input type="password" v-model="payPassword" placeholder="请输入支付密码" />
	    <view style="display: flex; margin-top: 30rpx;">
	      <button @click="cancelPayPopup">取消</button>
	      <button @click="confirmPayPopup">确定</button>
	    </view>
	  </view>
	</uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      title: 'picker',
      array: ['中国', '美国', '巴西', '日本'],
      index: 0,
      date: currentDate,
      time: '12:01',
      repairFactoryName: '伟业汽车维修厂子（人民路店）',
      repairFactoryAddress: '山阳区人民中路 32 号',
      customerName: '张三',
      customerPhone: '1888888888',
      vehicleInfo: '奔驰 FWE4/豫 A98FHJ',
      serviceProductCount: 3,
      serviceProducts: [
        { id: 1, name: '小保养套装 1', price: '¥199' },
        { id: 2, name: '小保养套装 2', price: '¥198' }
        // 添加更多服务产品对象
      ],
      couponInfo: '暂无'
    };
  },
  methods: {
		lianxi(){
	          // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
	          this.$refs.popuplianxi.open('bottom')
	    },
        cancelPopup() {
            this.$refs.popuplianxi.close();
        },
		cancelPopup02() {
		  this.$refs.popup.close();
		},
	  
    navigateToCouponPage() {
      uni.navigateTo({
        url:'/pages/baoyang/youhui/youhui'
      });
    },
    open() {
      // 通过组件定义的 ref 调用 uni-popup 方法,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('center');
    },
	open02() {
    // 通过组件定义的ref调用uni-popup方法打开支付密码输入弹出框
    this.$refs.popupPayPassword.open();
},
    // 时间
    bindPickerChange: function(e) {
      console.log('picker 发送选择改变，携带值为', e.detail.value);
      this.index = e.detail.value;
    },
    bindDateChange: function(e) {
      this.date = e.detail.value;
    },
    bindTimeChange: function(e) {
      this.time = e.detail.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9? month : '0' + month;
      day = day > 9? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    goToLeixPage() {
      uni.navigateTo({
        url: '../leixing/leixing'
      });
    }
  }
};
</script>

<style>
.box {
  margin: 40rpx 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yuan {
  padding: 5rpx;
  text-align: center;
  align-items: center;
  font-size: 28rpx;
  width: 80rpx;
  height: 80rpx;
  border: black solid 1rpx;
  border-radius: 50%;
}
img {
  width: 45rpx;
  height: 45rpx;
}
.popup-content {
  /* @include flex; */
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 130px;
  background-color: #fff;
}
.text {
  font-size: 35rpx;
  text-align: center;
  padding: 25rpx;
  border-bottom: 1px solid gainsboro;
}
.text:nth-child(3) {
  border: 0;
}
/* 水平分割线 */
.separator {
	border-bottom: 1px solid black;
}
</style>